<template>
	<view>
		<u-sticky offset-top='0' >
			<view style='padding: 20rpx;'>
				<u-search :show-action="true" placeholder='请输入选手名称' @custom='search' :animation="true" :clearabled='true'></u-search>
			</view>
		</u-sticky>
		<view class="warp-bottom-palyer">
			<view v-for="(item,index) in playerList" class="warp-bottom-palyer-list" @click="tapdetail(item,index)">
				<image class="header"
					:src="item.playerHeadPortrait"></image>
				<view class="center ">
					<view class="u-line-1">选手名称:{{item.playerName}}</view>
					<view>总投票数:{{item.totalVote}}</view>
					<view>当前排名:{{index+1}}</view>
				</view>
				<view class="warp-bottom-palyer-list-jiemur">
					<view v-if="type"  class="vote" @click.stop="tapApply(item)">编辑</view>
					<!-- <view class="vote" style="background: #e7ad50;" @click="tapVote(item,index)">投票</view> -->
					<!-- <view v-if="type" @click="tapDetel(item)">删除</view> -->
				</view>
				<!-- <view class="vote" @click="tapVote(item,index)">投票</view> -->
			</view>
			<view v-if="playerList.length == 0">
				<u-empty
				marginTop='100'
				text='还没有选手哦'
				        mode="data"
				>
				</u-empty>
			</view>
			<u-modal :show="addshow" title="确定删除该选手吗"  @cancel='addshow = false' @confirm='confirm' :closeOnClickOverlay="true" showCancelButton confirmColor='#e8565c'>
				
			</u-modal>
			<!-- <view class="warp-bottom-palyer-list">
				<image class="header"
					src="https://imagesize.hknet-inc.com/sp/files/9f93e4af-b5d9-4e71-8df4-9f85d1a6b4f6.png"></image>
				<view class="center u-line-1">
					<view>选手名称就差你都门口卖多少马拉喀什的是的风格</view>
					<view>总投票数</view>
					<view>当前排名</view>
				</view>
				<view class="vote">投票</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {getCompetitionPlayerListApi,getProgramqueryPlayerV2Api} from '@/config/api.js'
	export default {
		data() {
			return {
				 playerList:[],
				 institutionId:'',
				 competitionId:'',
				 programId:'',
				 pageNum:1,
				 addshow:false,
				 type:null,
				 joinType:null,
				 keyword:''
			}
		},
		onLoad(option) {
			console.log(option)
			this.competitionId = option.competitionId
			this.institutionId = option.institutionId || ''
			this.programId     = option.programId || ''
			
			if(option.type){
				this.type =1
			}
			if(option.joinType == 2){
				this.joinType =2
			}
		},
		onShow() {
			console.log(this.$router)
			if(this.joinType == 2){
				this.getPlayerV2List()
			}else{
				this.getList()
			}
		},
		onHide() {
			this.playerList=[]
			this.pageNum=1
		},
		methods: {
			confirm() {
				this.addshow =false
			},
			search(e){
			   this.playerList = []
			   this.keyword = e
			   if(this.joinType == 2){
			   	this.getPlayerV2List()
			   }else{
			   	this.getList()
			   }
			},
			getList(){
				getCompetitionPlayerListApi({
					competitionId:this.competitionId,
					institutionId:this.institutionId,
					programId:this.programId,
					pageNum:this.pageNum,
					keyword:this.keyword
				}).then(res=>{
					this.playerList.push(...res.records)
				})
			},
			getPlayerV2List(){
				getProgramqueryPlayerV2Api({
					competitionId:this.competitionId,
					programId:this.programId,
					pageNum:this.pageNum,
					keyword:this.keyword
				}).then(res=>{
					this.playerList.push(...res.records)
				})
			},
			tapDetel(e){
				this.addshow = true
				this.detelId = e.id
			},
			tapdetail(e,index){
				let sId = ''
				if (index > 0) {
					 sId = this.playerList[index - 1].id
				}
				uni.$u.route({
					url: '/pages/home/home/player-detail',
					params: {
						competitionId: this.id,
						sId: sId,
						playerId: e.id
					}
				})
			},
			tapApply(e){
				uni.$u.route({
				   url:'/pages/apply/palyer-apply/palyer-apply',
				   params:{
					   playerId:e.id,
					   competitionId:e.competitionId,
					   institutionId:e.institutionId,
					   programId:this.programId,
				   }
				})
			},
			tapVote(e,index){
			   uni.$u.route({
				   url:'/pages/home/home/playerVote',
				   params:{
					   playerId:e.id,
					   competitionId:e.competitionId,
					   institutionId:e.institutionId
				   }
			   })	
			},
		},
		onUnload() {
			
		},
		onReachBottom() {
			this.pageNum ++
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
.warp-bottom-palyer {
		padding-bottom:110rpx;
		box-sizing: border-box;
		&-list {
			border-top: 1rpx solid #dddddd;
			display: flex;
			align-items: center;
			padding: 30rpx;
			.warp-bottom-palyer-list-jiemur{
				
				>view{
					margin-top: 10rpx;
					flex-direction:row;
					display: block;
					width: 130rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					background: $uni-color-primary;
					color:#fff;
					border-radius: 10rpx;
				}
			}
            .jiemu{
				display: flex;
				justify-content: space-between;
				.warp-bottom-palyer-list-jiemu{
					width: 580rpx;
					>view{
						height: 60rpx;
						line-height: 60rpx;
					}
				}
				
			}
			.header {
				width: 158rpx;
				height: 158rpx;
				border-radius: 10rpx;

			}

			.center {
				flex: 1;

				margin: 0rpx 10rpx;

				>view {
					line-height: 50rpx;
				}
			}

			.vote {
				background-color: $uni-color-primary;
				color: #FFFFFF;
				height: 50rpx;
				width: 125rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
			}
		}
	}
</style>
